<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../lib/jq/jquery-1.11.3.min.js" ></script>
	<style type="text/css">
		.loading{    
		    width: 80px;    
		    height: 40px;    
		    margin: 0 auto;    
		    margin-top:100px;  
		}    
		.loading span{    
		    display: inline-block;    
		    width: 8px;    
		    height: 100%;    
		    border-radius: 4px;    
		    background: lightgreen;    
		    -webkit-animation: load 1s ease infinite;    
		}    
		@-webkit-keyframes load{    
		    0%,100%{    
		        height: 40px;    
		        background: lightgreen;    
		    }    
		    50%{    
		        height: 70px;    
		        margin: -15px 0;    
		        background: lightblue;    
		    }    
		}    
		.loading span:nth-child(2){    
		    -webkit-animation-delay:0.2s;    
		}    
		.loading span:nth-child(3){    
		    -webkit-animation-delay:0.4s;    
		}    
		.loading span:nth-child(4){    
		    -webkit-animation-delay:0.6s;    
		}    
		.loading span:nth-child(5){    
		    -webkit-animation-delay:0.8s;    
		}    

		
	</style>
	</head>
	<body>
		<div id="waitting">   
			<span></span>   
			<span></span>   
			<span></span>   
			<span></span>   
			<span></span>   
		</div>   
	<button id="showPro">显示进度条</button><button id="hidePro" >隐藏进度条</button>
	<script>
		$(function(){
			$("#showPro").on("click",function(){
				$("#waitting").attr("class","loading");
			});
			$("#hidePro").on("click",function(){
				$("#waitting").removeAttr("class");
			});
		});
	</script>
	</body>
</html>
